<!--
 * @Author: Bob
 * @Date: 2021-03-08 22:56:16
 * @LastEditors: Bob
 * @LastEditTime: 2021-03-10 23:12:58
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        x: {{x}} <br>
        y: {{y}}
    </div>
    <script type="module">
        import { createApp, reactive, onMounted, onUnmounted, toRefs } from './node_modules/vue/dist/vue.esm-browser.js'
        function useMousePosition() {
            const position = reactive({
                    x: 0 ,
                    y: 0
            })
            const update = e => {
                position.x = e.pageX
                position.y = e.pageY
            }
            //挂载生命周期
            onMounted(() => {
                window.addEventListener('mousemove', update)  
            })
            //卸载生命周期
            onUnmounted(() => {
                window.removeEventListener('mousemove')
            })
            //toRefs 把响应式对象中的所有属性也转换成响应式, toRefs() 要求传入的参数 是一个代理对象reactive
            return toRefs(position)
        }
        const app = createApp({
            setup() {
                // 第一个参数prop
                // 第二个参数context, attrs, emit, slots
                const {x, y} = useMousePosition()
                return {
                    x,
                    y
                }
            }
        })
        app
    </script>
</body>
</html>